<template>
  <div>
    <el-cascader
      ref="cascaderCity"
      :value="cityArr"
      style="width: 300px"
      :placeholder="placeholder"
      :options="options"
      :props="{
      value: valueType,
      label: 'name',
      ...props
    }"
      @change="handleChange"
    />
  </div>
</template>

<script>

  import addressData from '@/components/CascaderCity/addressData.json'

export default {
  props: {
    /**
     * 默认区域传入格式:
     * 非多选(props.multiple = false): 北京市/北京市/东城区
     * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
     */
    value: {
      type: String,
      default: ''
    },
    /**
     * 默认是regionData
     * regionData(省市区) provinceAndCityData(省市)
     */
    optionType: {
      type: String,
      default: 'regionData',
      validator: function(value) {
        return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
      }
    },
    /**
     * 默认数据类型name
     * name(string[北京市/北京市/东城区]) id(number[110000/110100/110101])地区码
     */
    valueType: {
      type: String,
      default: 'name',
      validator: function(value) {
        return ['id', 'name'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
      }
    },
    /**
     * 是否需要开启全国
     */
    isAddAll: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    props: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      cityArr: [],
      options: [],
      isChange: false
    }
  },
  watch: {
    value(val) {
      if (this.isChange) {
        this.isChange = false
      } else {
        this.setDefaultCity()
        const panel = this.$refs.cascaderCity.$refs.panel
        panel.clearCheckedNodes() // 清空级联选择器选中状态
        panel.activePath = [] // 清除高亮
      }
    }
  },
  created() {
    this.setDefaultCity()
    this.init()
  },
  methods: {
    /**
     * 初始化数据已选的数据
     */
    setDefaultCity() {
      // 判断是否有默认区域再判断是否开启多选
      const value = JSON.parse(JSON.stringify(this.value))
      let data = []
      if (value !== '' && typeof value === 'string') {
        if (this.props.multiple) {
          data = value.split(',').map(item => {
            return this.handleDefaultRegion(item)
          })
        } else {
          data = this.handleDefaultRegion(value)
        }
      }
      console.log(data)
      this.cityArr = data
    },
    /**
     * 字符串拆分出数组
     */
    handleDefaultRegion(value) {
      const arr = value.split('/').map((item) => {
        if (this.valueType === 'id') {
          return Number(item) // 判断valueType如果是id必须要传addressData里的id/id/id
        } else {
          return item
        }
      })
      return arr
    },
    /**
     * 将数组拼接回字符串
     */
    handleRegionStr(value) {
      let str = ''
      value.forEach(item => {
        str += item + '/'
      })
      return str.slice(0, str.length - 1)
    },
    /**
     * 初始化省市区数据
     */
    init() {
      const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
      if (this.isAddAll) {
        cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
      }
      switch (this.optionType) {
        case 'regionData': // 省市区
          this.options = cityData
          break
        case 'provinceAndCityData': // 省市
          this.options = cityData.map(item => {
            if (item.children) {
              item.children.map(item1 => {
                item1.children = null // 删除一个最后个区
                return item1
              })
            }
            return item
          })
          break
        default:
          console.error('请选择正确的optionType！')
          break
      }
    },
    handleChange(event) {
      this.cityArr = event
      let str = ''
      if (this.props.multiple) { // 多选
        event.forEach(item => {
          str += this.handleRegionStr(item) + ','
        })
        str = str.slice(0, str.length - 1)
      } else {
        str = this.handleRegionStr(event)
      }
      this.isChange = true
      this.$emit('input', str)
      this.$emit('change', str)
      console.log('选中:', event, str)
      console.log('12/123/2342'.split('/').map(item => Number(item)))
    }
  }
}
</script>
